<!--  -->
<template>
  <div class='cityConfigArea'>
    <div>
      <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-区域</span>
      <Button class="cityConfigArea_alertMessButton" type="primary"
        @click="areaAdd">新增</Button>

    </div>
      <dt-grid ref="table" :columns="regionColumns" page :onFetch='onFetch' />
    <Modal v-model="checkMoudle" title="新增区域" footer-hide width="500px" @on-cancel='closeTan'>
      <div>
        <Form ref="formValidate" :label-width="120" :model="formValidate" :rules="ruleValidate">
          <FormItem label="区域名称"  prop="regionName">
             <Input type="text" v-model="formValidate.regionName" placeholder="请输入区域名字" />
          </FormItem>
          <FormItem label="行政编码"  prop="administrativeCode">
             <Input type="number" v-model="formValidate.administrativeCode" @on-keyup="keyUp" placeholder="请输入行政编码" />
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button class="cityConfigArea_cancelButton"
              @click="closeTan">取消</Button>
            <Button type="primary" @click="addAreaSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>

  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'

  import regionColumn from './opt/regionColumns'
  export default {
    components: { draggable },
    data() {
      // const ruleValidateCodeList = (rule, data, callback) => {
      //   console.log('aaaaaaavvvvvvvvvvv');
      //   let flag = true
      //   var regex = /[1-9]\d{5}(?!\d)/;
      //     if(!regex.test(data)){
      //       flag = false
      //       console.log('aaaaaaavvvvvvvvvvv');
      //     }
      //   if (!flag) return callback('请输入正确的行政编码')
      //   callback()
      // }
      return {
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 30, 40, 50],
        },
        formValidate: {
          regionName: '',
          administrativeCode:''
        },
        ruleValidate: {
          regionName: [
            { required: true, message: '请输入区域名称', trigger: 'blur' },
          ],
          administrativeCode: [
            // { validator: ruleValidateCodeList, trigger: 'blur' }            
            { required: true, message: '请输入行政编码', trigger: 'blur' },
          ],
        },
        checkMoudle: false,
        regionColumns: [],
        type:"save",
        mess:'',
      }
    },
    computed: {},
    watch: {},
    methods: {
      keyUp(){
        if(this.formValidate.administrativeCode.length>9)this.formValidate.administrativeCode=this.formValidate.administrativeCode.slice(0,9)
      },
       onFetch(data) {
        return generalConfiguration.regionList({
          ...data,
          parentCode: this.$route.query.code, 
        }).then((res) => {
          return res
        })
      },
      //点击新增
      areaAdd() {
        this.checkMoudle = true
        this.type = 'save'
      },
      closeTan(){
        this.mess=''
        this.formValidate={
          regionName: '',
          administrativeCode:''
        }
        this.checkMoudle = false
      },
      //增加域块
      addAreaSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {          
            let params = {
              	childrenCode: this.formValidate.administrativeCode,
                childrenName:this.formValidate.regionName,            
                parentCode: this.$route.query.code, 
                type:this.type
            }

            if(this.mess.cityId){
              params.cityId = this.mess.cityId
            }
            if(this.type=='save'){
                generalConfiguration.regionCreate(params)
                .then((res) => {
                  this.closeTan()
                  this.$refs.table.fetch()                  
                })
            }else{
               generalConfiguration.regionEidt(params)
                .then((res) => {
                  this.closeTan()
                  this.$refs.table.fetch()
                })
            }
           
          }
        })
      },
      
      // 编辑
      regionEdit(mess){
        this.mess = mess
        console.log(mess,'编辑');        
        this.formValidate.regionName=mess.childrenName
        this.formValidate.administrativeCode= String(mess.childrenCode)
        this.type = 'edit'
        this.checkMoudle = true
      },
      //取消提示
      regionDel(mess) {       
        this.$Modal.confirm({
          title: '删除',
          content: '你确认删除么？',
          closable: true,
          onOk: () => {
            let params = {
              cityId:mess.cityId,
              cityCode:mess.childrenCode
            }
            generalConfiguration.regionDel(params).then((res) => {
              this.$Message.success('删除成功')
              this.$refs.table.fetch()
            })
          }
        })
      },

    },
    mounted() {
      this.$refs.table.init(this, new regionColumn(this))
      this.$refs.table.fetch()
    },
  }
</script>
<style lang='scss' scoped>
  .cityConfigArea {
    &_alertMess {
      font-size: 16px;
      font-weight: 700;
      float: left;
      margin-top: 6px;

      .red {
        color: red;
      }
    }

    &_alertMessButton {
      margin: 0 8px 25px 8px;
    }

    &_moudle_select {
      width: 306px;
      margin-right: 10px;
    }

    &_moudle_inputList {
      margin-bottom: 10px;
    }

    &_moudle_icon {
      vertical-align: text-top;
    }
  }

  .cityList_moudle_footer {
    ::v-deep .ivu-form-item-content {
      text-align: right;
      margin-right: 42px;
    }
  }

  .customSortStyle {
    text-align: left;

    .customSortHead,
    .customSortBody {
      li {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #eeeeee;

        div {
          flex: 1;
          text-align: center;

          button {
            margin: 0px 6px;
          }
        }

        div:first-child {
          flex: 0.4;
        }
      }
    }

    .customSortHead li {
      padding-bottom: 10px;
    }

    .customSortBody li {
      padding: 10px 0;
      line-height: 31px;
    }

    .customSortBody {
      max-height: 400px;
      overflow-y: auto;
    }

    .customSortFoot {
      padding-top: 14px;
      text-align: center;
    }
  }

  .cityConfigArea_cancelButton {
    margin-right: 6px;
  }
</style>